<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
</head>
<body>
    <div class="home">
        <!-- 产品页头部 -->
        <div class="header">
            <div class="header_top">
                <p>全国服务热线：400-000-0000</p>
                <div>
                    <a href="#">加入收藏</a>
                    <a href="#">设为首页</a>
                </div>
            </div>
            <div class="header_bottom">
                <div class="header_left">
                    <img src="img/logo.png" alt="">
                    <p>TK科技有限公司</p>
                    <p>cer dcd keo Holdings Co., Ltd.</p>
                </div>
                <div class="header_right">
                    <ul>
                        <li><div><a href="index.html">首页<br>Home</a></div></li>
                        <li><div><a href="detailed.html">关于我们<br>About</a></div></li>
                        <li><div><a href="product.html">产品中心<br>Products</a></div></li>
                        <li><div><a href="#">服务支持<br>Service</a></div></li>
                        <li><div><a href="#">新闻中心<br>News</a></div></li>
                        <li><div><a href="#">在线商店<br>Shop</a></div></li>
                        <li><div><a href="#">联系我们<br>Contact Us</a></div></li>
                    </ul>
                </div><div></div>
            </div>
        </div>

        <!-- 产品页中部内容 -->
        <div class="content">
            <div class="banner"></div>
            <div class="introduce">
                <div>
                    <p>首页  >  新品发布 > S6207Y-WR</p>
                    <div class="picShow">
                        <div class="big">
                            <img src="img/p1.png" alt="" id="imgShow">
                        </div>
                        <div class="picList">
                            <ul class="clearfix" id="imgList">
                                <li><img src="img/p1.png" alt=""></li>
                                <li><img src="img/p2.png" alt=""></li>
                                <li><img src="img/p3.png" alt=""></li>
                                <li><img src="img/p4.png" alt=""></li>
                                <li><img src="img/p5.png" alt=""></li>
                            </ul>
                        </div>
                    </div>
                    <div class="wordShow">
                        <div>
                            <p>百万高清网络摄像机</p>
                            <p>型号：S6207Y-WR</p>
                            <h3>描述：</h3>
                            <ul>
                                <li>100万无线高清 64GB TF卡 语音对讲 智能连接 手机观看</li>
                                <li>1、采用H.264视频压缩技术, 实现超低码率、高清晰画质, 128K-2056Kbps可调；</li>
                                <li>2、1280*720 Pixels(1000k Pixels) 720P/VGA；</li>
                                <li>3、支持控制上下旋转巡航（水平355度/垂直120度）；支持ONVIF协议，标准RTSP流；</li>
                                <li>4、支持最大64GB TF卡插入，支持双向对讲；</li>
                                <li>5、支持smartlink免网线智能配置摄像机WiFi；支持手机远程监控（iPhone, Android</li>
                            </ul>
                            <a href="#">立即购买</a>
                            <a href="#">联系我们</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr">
                <ul>
                    <li><a href="#des">产品描述</a></li>
                    <li><a href="#math">规格参数</a></li>
                    <li><a href="#ppic">产品图集</a></li>
                </ul>
            </div>
            <div class="description">
                <div class="d_1">
                    <a name="des"></a>
                    <p>720P高清画质</p>
                    <p style="margin-bottom: 0px;">百万高清镜头，高性能海思芯片</p>
                    <p>1280X720分辨率，清晰度是普通摄像头的3倍</p>
                    <img src="img/p_pic1.png" alt="" style="margin-top: 60px">
                    <img src="img/p_pic2.png" alt="" style="margin-top: 60px">
                </div>
                <div class="d_1">
                    <p>10米红外夜视</p>
                    <p>零光源不用怕，成像一样清晰</p>
                    <p>红外校正的光学设计，自动校正红外虚焦，保证晚上图像清晰，红外灯 照射距离可达10米，配备IR-CUT，夜晚彩转黑白</p>
                    <img src="img/p_pic3.png" alt="">
                </div>
                <div class="d_1">
                    <p style="margin-top: 20px">移动侦测  信息推送</p>
                    <p>精准度高，误报率低。不怕贼惦记</p>
                    <p>当监控区域出现移动目标时，监控录像就会自动开启录像功能，并会 在第一时间将异常情况发送报警提示您</p>
                    <img src="img/p_pic4.png" alt="">
                </div>
                <div class="d_img">
                    <img src="img/p_pic5.png" alt="">
                </div>
            </div>
            <div class="hr">
                <ul>
                    <li><a href="#">规格参数</a></li>
                </ul>
            </div>
            <div class="p_math">
                <a name="math"></a>
                <img src="img/p_pic6.png" alt="">
            </div>
            <div class="hr">
                <ul>
                    <li><a href="#">更多产品</a></li>
                </ul>
            </div>
            <div class="imgList">
                <a name="ppic"></a>
                <ul>
                    <li><img src="img/p_1.png" alt=""></li>
                    <li><img src="img/p_2.png" alt=""></li>
                    <li><img src="img/p_3.png" alt=""></li>
                    <li><img src="img/p_4.png" alt=""></li>
                    <li><img src="img/p_5.png" alt=""></li>
                </ul>
            </div>
        </div>

        <!-- 产品页底部内容 -->
        <div class="footer">
            <div class="footer_top">
                <div class="footer_link">
                    <div>
                        <span>关注我们 ：</span>
                        <a href="#"><img src="img/qq.png" alt=""></a>
                        <a href="#"><img src="img/weixin.png" alt=""></a>
                    </div>
                    <p>
                        <a href="#">网站首页</a>·<a href="#">新闻动态</a>·<a href="#">关于我们</a>·<a href="#">团队风采</a>·<a href="#">联系我们</a>·<a href="#">在线留言</a>
                    </p>
                </div>
            </div>
            <div class="footer_bottom">
                <p> ©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</p>
            </div>
        </div>
    </div>
    <script>
        window.onload = function (){
            var img_show = $('imgShow');
            var img_list = $('imgList').children;
            for(var i=0; i < img_list.length; i++){
                (function (i) {
                    var img = img_list[i];
                    img.onmouseover = function () {
                        img_show.src = 'img/p'+( i+1 )+'.png';
                    }
                })(i);
            }

        };
        // 获取ID
        function $(id) {
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
    </script>
</body>
</html>